<template>
<el-dropdown ref="dropdown">
    <div class="el-dropdown-link">
        <el-form-item :label="prItem.name" 
        :rules="[
            { required: true, message: '请输入' + prItem.name, trigger: 'blur' },
        ]"
        :label-width="props.prItem.labelWidth"
            class="bb mb20 w329 ">
            <div class="info" >{{prItem.description}}</div>
            <el-input readonly value="List"
                placeholder="List" type="text" autocomplete="off" />
        </el-form-item>
    </div>
    <template #dropdown>
        <el-dropdown-menu slot="dropdown">
            <template #default>
                <div class="dropdowntb bb " @click.stop="preventFun">
                    <div class="fx sb ac">
                        <span class="setParams f14 c0">表格参数设置</span>
                        <span class="ib" @click="handleAddListParam(props.prItem)">
                            <plus-btn />
                        </span>
                    </div>
                    <div class="fc mt10">
                        
                        <table class="table">
                            <tr>
                                <th>参数列表</th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="(mList, mIndex) in props.prItem.dataModelList">
                                <td>
                                    <el-form :model="mList" ref="mListRef"  >
                                        <el-form-item :lable-width="0"
                                            style="margin: 0 !important;" :rules="[
                                                { required: true, message: '请输入数据', trigger: 'blur' },
                                            ]" prop="p">
                                            <el-input
                                                v-on:input="mList.p = mList.p.replace(/[^0-9.,]/gi, '')"
                                                maxlength="20" class="gree"
                                                v-model="mList.p"
                                                placeholder="请输入内容" />
                                        </el-form-item>
                                    </el-form>
                                </td>
                                <td><el-button
                                        @click="deleteListData(props.prItem.dataModelList, mIndex)"
                                        size="small" type="danger">删除</el-button></td>
                            </tr>
                        </table>
                    
                    </div>
                </div>
            </template>
        </el-dropdown-menu>
    </template>
</el-dropdown>
</template>
<script setup>
import { ref, defineExpose ,defineProps,onMounted } from 'vue'
import plusBtn from '@/components/plusBtn/Index.vue'

const mListRef = ref([])
 const props = defineProps({
    prItem: {
        type: Object,
        default: {},
    }
})
//添加数组参数
function handleAddListParam(item) {
    item.dataModelList.push({p:''})
}
//删除List格式数据项
function deleteListData(list, index) {
    list.splice(index, 1)
}
//控制弹窗状态
const dropdown = ref()
function handleVisible(visible) {
  if (!dropdown.value) return
  if (visible) {
    dropdown.value.handleClose()
  } else {
    dropdown.value.handleOpen()
  }
}

//认证通过的状态
let valid = true
//表单验证回调
function validator(isValid, invalidFields) {
    // 认证不通过
    if (!isValid) {
        valid = false
        handleVisible(false)
    }
}
//表单认证
function checkForm() {
     if (Array.isArray(mListRef.value)) {
        mListRef.value.map((item, index) => {
            item.validate(validator)
        })
    } else {
        mListRef.value.validate(validator)
    } 
    return { valid, tabIndex: props.tabIndex }
}
defineExpose({ checkForm })
</script>